<template>
	<view class="initTime_container">
		<view class="time">
			<text class="time_num">{{ isDate.shi }}:{{ isDate.fen }}</text>
		</view>
		<view class="date">
			<text class="date_num">{{`${isDate.yue + '月' + isDate.ri + '日'}`}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDate: {
					yue: '',
					ri: '',
					shi: '',
					fen: ''
				}
			}
		},
		created() {
			this.initDate();
		},
		methods: {
			initDate() {
				let currDate = new Date();
				this.isDate.yue = currDate.getMonth() + 1 >= 10 ? currDate.getMonth() + 1 : '0' + currDate.getMonth() + 1;
				this.isDate.ri = currDate.getDate() >= 10 ? currDate.getDate() : '0' + currDate.getDate();
				this.isDate.shi = currDate.getHours() >= 10 ? currDate.getHours() : '0' + currDate.getHours();
				this.isDate.fen = currDate.getMinutes() >= 10 ? currDate.getMinutes() : '0' + currDate.getMinutes();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.initTime_container {
		position: absolute;
		top: 15%;
		width: 100%;
		text-align: center;
		color: #fff;
		z-index: 10;

		.time_num {
			font-size: 150rpx;
			font-weight: 600;
			line-height: 80px;
		}

		.date_num {
			font-size: 50rpx;
		}
	}
</style>
